<include file="Public/header" />
<body onselectstart="return false">
<style>
    .main{
        position: absolute;
        left:30px;
        right:30px;
        top:0px;
        bottom:67px;
        margin:0;
        min-height: auto;
    }
    .form-content{
        position: absolute;
        left:20px;
        right:20px;
        top:40px;
        bottom:20px;
        margin-top: 15px;
    }
    .form-right {
        margin-left: 30px;
        line-height: normal;
    }
    .form{
        height: 50%;
        margin:0;
        overflow: hidden;
    }
    .move{
        width: 95%;
        position: absolute;
        top:50px;
        left:0;
        right:0;
        bottom:10px;
        border:1px solid rgb(102, 102, 102);
        overflow: auto;
    }
    .container-div{
        width: 49%;
        height: 100%;
        position: relative;
    }
    .form-left {
        width: 150px;
        text-align: left;
        font-size: 14px;
        height: 45px;
        line-height: 45px;
        margin-left: 30px;
    }

    .form-right table .choice td{
        background:#DFE8F6 !important;
        border:none;
        outline:none;
    }
    .form-right table thead th {
        background: #F0F1F3;
        padding: 10px 0;
        font-weight: 100;
        outline:none;
    }
    .form-right table td {
        width: auto !important;
        background: #fff !important;
        outline: none;
        padding: 5px 0 !important;
        font-size: 14px;
    }
    .row-4 td{
        max-width: 25% !important;
        width:25% !important;
    }
    .therd{overflow: hidden;line-height: 30px;text-align: center;background: #F0F1F3}
    .tableAdd{position: absolute;left:0;right:0;top:30px;bottom:0;overflow-y:auto;overflow-x:hidden;}
    .therd li{float:left;width:25%;}
    *{box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
    .form-right table td:first-child,.form-right table .choice td{max-width: 25% !important;width:25% !important;}
    .form-content table tr td{border:none;text-align: center;}
</style>
<div class="main" >
    <div class="content" style="position: relative;height:100%;">
        <div class="head-content">
            <div class="head-title">
                <span>库存盘点</span>
            </div>
              <div class="content">
        <div class="head-content">
            <form action="<{:U('index')}>" method='get'>
                <div class="head-search">
                    <input class="form-input-small" type="text" value="<{:I('get.no')}>" name='no' placeholder="编号" />
                    <button class="form-button color-bg-green">搜索</button>
                </div>
            </form>
        </div>
    </div>
        </div>
            <div class="form-content">
                <div class="form">
                    <div class="container-div">
                        <div class="form-left">待整理货柜</div>
                        <div class="form-right move" id="send_container" >
                            <ul class="therd">
                                <li>编号</li>
                                <li>容量</li>
                                <li>已使用</li>
                                <li>剩余容量</li>
                            </ul>
                            <div class="tableAdd">
                                <table cellpadding="0" cellspacing="0" class="row-4">
                                    <foreach name='container_list' item='vo'>
                                        <tr>
                                            <td >
                                                <input type="checkbox" style="float: left;width:auto;height: auto;margin:3px 10px;padding: 0;" />
                                                <{$vo['no']}>
                                            </td>
                                            <td><{$vo['capacity']}></td>
                                            <td><{$vo['used']}></td>
                                            <td><{:$vo['capacity'] - $vo['used']}></td>
                                            <input type="hidden" name="id" value="<{$vo['id']}>">
                                        </tr>
                                    </foreach>
                                </table>
                            </div>    
                        </div>
                        </div>
                        <div class="container-div">
                        <div class="form-left" >移入货柜</div>
                        <div class="form-right move" id="accept_container" >
                        </div>
                            <button id="save" class="form-button color-bg-green" style="position: absolute;top:2px;left:-95px">转移>></button>
                    </div>
                </div>
                <div class="form">
                    <div class="container-div" >
                        <div class="form-left">当前货柜快件</div>
                        <div class="form-right move" id="send_package">
                        </div>
                    </div>
                    <div class="container-div"  >
                        <div class="form-left">移入货柜快件</div>
                        <div class="form-right move" id="accept_package">
                        </div>
                    </div>
                </div>
            </div>
    </div>
</div>

<include file="Public/footer"  />
<script>
    $(function(){
    $("#send_container tr").click(function(){
        var id = $(this).children('input').val();
        $.post(
                "<{:U('getPackage')}>",
                {
                    id:id
                },function(res){
                    $("#send_package").html(res);
                    $("#accept_package").html('');
                }
        );
        $.post(
                "<{:U('getContainer')}>",
                {
                    id:id
                },function(res){
                    $("#accept_container").html(res);
                }
        );
    });
    $("#accept_container").delegate("tr","click",function(){
        var id = $(this).children('input').val();
        $.post(
                "<{:U('getPackage')}>",
                {
                    id:id
                },function(res){
                    $("#accept_package").html(res);
                }
        );
    });
     //待整理货柜选中处理
     $("#send_container tr").click(function(){
         $(this).addClass('choice');
         $(this).siblings().removeClass('choice');
         if($(this).hasClass('choice')){
            $(this).find("input[type=checkbox]").prop('checked', true);
            $(this).siblings().find("input[type=checkbox]").prop('checked', false);          
        }else{
            $(this).find("input[type=checkbox]").prop('checked', false);
        }
     });
    //待处理快件选中处理
    $("#send_package").delegate("tr","click",function(){
        $(this).toggleClass('choice');
        if($(this).hasClass('choice')){
            $(this).find("input[type=checkbox]").prop('checked', true);
        }else{
            $(this).find("input[type=checkbox]").prop('checked', false);
        }
    });
    //转入货柜选中处理
    $("#accept_container").delegate("tr","click",function(){
        $(this).addClass('choice');
        $(this).siblings().removeClass('choice');
        if($(this).hasClass('choice')){
            $(this).find("input[type=checkbox]").prop('checked', true);
            $(this).siblings().find("input[type=checkbox]").prop('checked', false);
        }else{
            $(this).find("input[type=checkbox]").prop('checked', false);
        }
    });

    })
</script>
<script>
        $("#save").click(function(){
            var package_ids = [];
            var send_id = $("#send_container tr[class='choice'] input[name='id']").val();
            var accept_id = $("#accept_container tr[class='choice'] input[name='id']").val();
            $("#send_package tr[class='choice']").each(function(index,dom){
               package_ids.push($(dom).find("input[name='id']").val());
            })
            if(!send_id){
                layer.msg('请选择要整理的货架');return;
            }
            if(!accept_id){
                layer.msg('请选择要转入的货柜');return;
            }
            if(package_ids.length == 0){
                layer.msg('请选择要转入的快件');return;
            }
            $.post(
                    "<{:U('save')}>",
                    {
                        send_id:send_id,
                        accept_id:accept_id,
                        package_ids:package_ids
                    },function(res){
                        if(res.status == 1){
                            var selected = '';
                            $("#send_package tr[class='choice']").each(function(i,dom){
                               selected += "<tr class = 'choice'>" + $(dom).html() + "</tr>";
                            })
                            $("#send_package tr[class='choice']").remove();
                            $("#accept_package table").append(selected);
                            layer.msg(res.info);
                        }else{
                            layer.msg(res.info);
                        }
                    }
            );
        });

</script>
</body>
</html>